<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>提现列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
				<!-- 搜索问卷问题 -->
                <el-input v-model="query.param.name" placeholder="收款人" class="handle-input mr10"></el-input>
                <el-input v-model="query.param.phone" placeholder="手机号" class="handle-input mr10"></el-input>
                <el-select v-model="query.param.withdrawWay" placeholder="提现方式" class="handle-select mr10">
                    <el-option key="1" label="支付宝" value="1"></el-option>
                    <el-option key="2" label="微信" value="2"></el-option>
                    <el-option key="3" label="银行转账" value="3"></el-option>
                </el-select>
                <el-select v-model="query.param.withdrawStatus" placeholder="处理状态" class="handle-select mr10">
                    <el-option key="1" label="待审核理" value="1"></el-option>
                    <el-option key="2" label="提现成功" value="2"></el-option>
                    <el-option key="3" label="审核不通过" value="3"></el-option>
                </el-select>
                <el-input v-model="query.param.codeNumber" placeholder="提现单号" class="handle-input mr10"></el-input>
                <el-input v-model="query.param.withdrawFee" placeholder="提现金额" class="handle-input mr10"></el-input>
                <el-input v-model="query.param.receivableAccount" placeholder="收款账户" class="handle-input mr10"></el-input>
				 <!-- 搜索按钮  -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table 
                :data="tableData" 
                border 
                class="table" 
                ref="multipleTable" 
                header-cell-class-name="table-header" 
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="60" align="center" prop="id"></el-table-column>
                <el-table-column prop="codeNumber" label="提现单号"  align="center"></el-table-column>
                <el-table-column prop="name" label="收款人"  align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号"  align="center"></el-table-column>
                <el-table-column prop="withdrawWay" label="提现方式"  align="center" >
                    <template slot-scope="scope">
                        {{scope.row.withdrawWay == 1 ? '支付宝' : ''}}
                        {{scope.row.withdrawWay == 2 ? '微信' : ''}}
                        {{scope.row.withdrawWay == 3 ? '银行转账' : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="withdrawStatus" label="处理状态"  align="center" >
                    <template slot-scope="scope">
                        {{scope.row.withdrawStatus == 1 ? '待审核' : ''}}
                        {{scope.row.withdrawStatus == 2 ? '提现成功' : ''}}
                        {{scope.row.withdrawStatus == 3 ? '审核不通过' : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="withdrawFee" label="提现金额" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="250px">
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.withdrawStatus == 1"
                                type="text"
                                @click="tobeReviewed(scope.$index, scope.row)"
                        >待审核
                        </el-button>
                        <el-button
                                v-if="scope.row.withdrawStatus != 1"
                                type="text"
                                @click="xiangqing(scope.$index, scope.row)"
                        >详情
                        </el-button>
                    </template>
                </el-table-column>   
            </el-table>
			<!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 展示详情 -->
        <el-dialog :title="title" :visible.sync="tobereviewed" width="40%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="提现方式">
                    <el-select v-model="form.withdrawWay">
                        <el-option v-for="item in withdrawWays" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提现账号" v-if="form.withdrawWay==3">
                    <el-input v-model="form.contactName"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="提现金额">
                    <el-input v-model="form.withdrawFee"></el-input>
                </el-form-item>
                <el-form-item label="账户姓名">
                    <el-input v-model="form.name" ></el-input>
                </el-form-item>
                <el-form-item label="支付宝账号">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="申请时间">
                    <el-input v-model="form.createTime"></el-input>
                </el-form-item>
                <el-form-item label="当前状态">
                    <el-select v-model="form.withdrawStatus">
                        <el-option v-for="item in withdrawStatuss" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作人">
                    <el-input v-model="form.actionUser"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateClick(form)">通过审核</el-button>
                <el-button type="danger"  @click="refuse(form)">拒绝审核</el-button>
                <el-button @click="tobereviewed = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝 通过  弹窗 -->
        <el-dialog :title="titles" :visible.sync="refuses" width="40%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="操作人">
                    <el-input v-model="form.actionUser"></el-input>
                </el-form-item>
            拒绝原因：<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.content"></el-input>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  type="primary" @click="determine(form)">确定</el-button>
                <el-button @click="refuses = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 通过  -- 未通过 的详情展示 只能查看不能操作 -->
        <el-dialog :title="titles" :visible.sync="exhibition" width="40%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="提现方式">
                    <el-select v-model="form.withdrawWay">
                        <el-option v-for="item in withdrawWays" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提现账号" v-if="form.withdrawWay==3">
                    <el-input v-model="form.contactName"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="提现金额">
                    <el-input v-model="form.withdrawFee"></el-input>
                </el-form-item>
                <el-form-item label="账户姓名">
                    <el-input v-model="form.name" ></el-input>
                </el-form-item>
                <el-form-item label="支付宝账号">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="申请时间">
                    <el-input v-model="form.createTime"></el-input>
                </el-form-item>
                <el-form-item label="发送通知时间">
                    <el-input v-model="form.sentNoticeTime"></el-input>
                </el-form-item>
                <el-form-item label="当前状态">
                    <el-select v-model="form.withdrawStatus">
                        <el-option v-for="item in withdrawStatuss" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核备注">
                    <el-input v-model="form.content"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="exhibition = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>
import { fetchData } from '../../../api';
import { userList } from '@/api/api.js';
import { userUpdate } from '@/api/api.js';
import md5 from 'js-md5';
// 富文本
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 10,
                param: {
                    name:'',
                    phone:'',
                    withdrawWay:'',
                    withdrawStatus:'',
                    codeNumber:'',
                    withdrawFee:'',
                    receivableAccount:''
                }
            },
            withdrawWays:[{
                    id: 1,
                    name: '支付宝'
                }, {
                    id: 2,
                    name: '微信'
                },{
                    id: 3,
                    name: '银行转账'
                }],
            withdrawStatuss: [{
                    id: 1,
                    name: '待审核理'
                }, {
                    id: 2,
                    name: '提现成功'
                },{
                    id: 3,
                    name: '审核不通过'
                }],
            textarea: '',
            pageTotal:0,
            tableData: [],
            cate:[],
            form:{},
            title:'',
            titles:'',
            id:'',
            withdrawStatus:0,
            tobereviewed:false,
            exhibition:false,
            refuses:false
        };
    },
    created() {
        this.tablist();
    },
    methods: {
		tablist() {
			withdrawList(this.query).then(res => {
                if(res.returnCode == 200){
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                }else{
                    this.tableData = null;
                    this.pageTotal = 0;
                }
			})
        },
        tobeReviewed(index, row) {
            this.title = '待审核';
            this.idx = index;
            this.form={};
            this.id=row.id;
            this.details(row.id);
        },
        details(id){
            withdrawDetails(id).then(res => {
                if (res.returnCode === 200) {
                    var row = res.data;
                    this.form = row;
                    this.tobereviewed=true;
                }
            })
        },
        //取消 弹窗 填写为什么内容
        refuse(){
            this.titles = '审核不通过原因';
            this.refuses=true;
        },
        determine(form){
            if(!form.actionUser){
                this.$message.error(`请输入操作人`);
                return false;
            }
            form.withdrawStatus=3
            withdrawUpdate(form).then(res => {
                if(res.returnCode === 200){
                    this.$message.success("已拒绝");
                    this.refuses=false;
                    this.tobereviewed=false;
                    this.tablist();
                }else{
                    this.$message.success("失败");
                }
            })
        },
        // 未通过后的详情  -- 通过后的详情
        xiangqing(index, row){
            this.title = '详情';
            this.form={};
            this.dssss(row.id);
        },
        dssss(id){
            withdrawDetails(id).then(res => {
                if (res.returnCode === 200) {
                    var row = res.data;
                    this.form = row;
                    this.exhibition=true;
                }
            })
        },
        //申请通过
        updateClick(row){
            if(!row.actionUser){
                this.$message.error(`请输入操作人`);
                return false;
            }
            this.withdrawupdate(row);
        },
        withdrawupdate(row){
            row.withdrawStatus=2
            withdrawUpdate(row).then(res =>{
                if(res.returnCode === 200){
                    this.tobereviewed=false;
                    this.tablist();
                }
            })
        },
        stateClick(row) {
            userUpdate({
                id: row.id,
                status: row.status === 1 ? 0 : 1
            }).then(res => {
                if (res.returnCode === 200) {
                    this.$message.success(row.status == 1 ? "已冻结成功" : "已解冻成功");
                    this.tablist();
                }
            }, err => {
                console.log('err--', err);
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
         // 分页导航
        handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
        },
         // 触发搜索按钮
         handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            this.tablist();
        }
    }
};
</script>
<!-- css样式实现 -->
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 220px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
/* 添加的 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 15px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }
  .gray{
      color:#999999;
  }
</style>
